<template>
  <div>
    <h4 style="margin:0 0 10px 0">
      <span>商家余额</span>
      <span v-show="titleStatus">
        <span style="padding-left:20px;font-size:13px;">{{hospitle}}  > 查看流水  </span>
        <el-button class="addBtn" @click="blockFun">返回</el-button>
      </span>
    </h4>
    <div v-if="infoStatus">
      <el-row style="margin-bottom:10px">
        <el-col :span="14" >
          <div style="display:flex;align-items:center">
            <span>城市:</span>
            <el-select v-model="value" style="width:100px" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="10" style="text-align:right">
          <el-input v-model="sheachValue" style="width:300px" placeholder="输入搜索内容"></el-input>
          <el-button type="primary" @click="seachFun">搜索</el-button>
        </el-col>
      </el-row>
      
      <el-table :data="tableData" border style="width: 100%" >
        <el-table-column prop="name" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column prop="city" label="城市"> </el-table-column>      
        <el-table-column prop="name" label="商家"> </el-table-column>      
        <el-table-column prop="account_name" label="账号"> </el-table-column>      
        <el-table-column prop="balance" label="余额"> </el-table-column>      
        <el-table-column prop="totalDayAccounts" label="总流水"> </el-table-column>      
        <el-table-column prop="productCount" label="商品数"> </el-table-column>      
        <el-table-column prop="salesVolume" label="销量"> </el-table-column>      
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.status == 0"> 未审核</span>
              <span v-else-if="scope.row.status == 1" class="green"> 上线</span>
              <span v-else-if="scope.row.status == 2"> 下线</span>
              <span v-else-if="scope.row.status == 3" class="red"> 删除</span>
            </div>
          </template>
        </el-table-column>  
         <el-table-column label="操作" width='220px'>
          <template slot-scope="scope" >
            <div>
              <el-button class="addBtn" @click="account(scope.row)" v-if="userRole.KW_301002">结算</el-button>
              <el-button type="primary"  class="addBtn" @click="seachInfo(scope.row)" v-if="userRole.KW_301003"> 查看流水</el-button>
              <!-- <el-button type="primary"  class="addBtn" @click="deletData(scope.row.id)" v-if="userRole.KW_301003"> 导出流水</el-button> -->
            </div>
          </template>
        </el-table-column>     
      </el-table>

      <el-dialog title="结算" :visible.sync="dialogVisible" center width="40%" :before-close="handleClose">
        <div class="" style="text-align:center">
          <div>结算金额：<span>123.4</span>元</div>
          <div>商家：<span>麦芽糖</span></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitFun('ruleForm2')">确 定</el-button>
        </span>
      </el-dialog>


      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-else>
      <water-table :tableData="infoData"></water-table>      
    </div>
  </div>
</template>

<script>
import Http from '@/Http/Http'
import waterTable from './waterTable'
import getTime from '@/Http/getTime'


  export default {
    components:{
      waterTable
    },
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入关键字'));
        } else {
          callback();
        }
      };
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        dialogVisible:false,
        currentPage4: 1,//分野  
        infoStatus:true, //查看流水状态
        titleStatus:false,
        total:0,      
        tableData: [],//商家列表数据
        infoData:[],//查看单个返回的数据
        hospitle:'',//商家名称
        page:1,
        pageSize:10,
        sheachValue:'',
        options: [{
          value: '选项1',
          label: '黄金糕'
        },{
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
       
      }
    },
    created() {
      this.getlist()
    },
    methods: {
       getlist() {
        const parm ={
          "pageIndex":this.page,
          "pageSize":this.pageSize,
          "keyword":this.sheachValue,
          "cityId":this.value
        };
        
        Http.getBalanceList(parm)
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
          
        })
        .catch( error => {
          
        })
      },  
      account() {
        this.dialogVisible = true
      },
       handleClose() {
        this.dialogVisible = false;
      },
      //查看流水
      seachInfo(row){
        
        const parm ={
          "pageIndex":1,
          "pageSize":this.pageSize,
          "hospitalId":row.hospital_id
        };
        Http.getWaterLIst(parm)
        .then( res => {
          this.titleStatus = true;
          this.infoStatus = false;
          this.hospitle = row.name;
          this.infoData = res.data.data.rows;
        })
        .catch( error => {
          
        })
      },

      //返回列表
      blockFun(){
        this.titleStatus = false;
        this.infoStatus = true;
        this.getlist()
        this.infoData = '';
      },
       //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        
      },
     
      seachFun(){
        this.getlist()
      }
    }
  }
</script>